import { 
  Box,Button,useColorMode,Text,
  useColorModeValue,LightMode,chakra, useStyleConfig
 } from "@chakra-ui/react";
 import Content from './components/Content'

//  const MyButton = chakra('button', {
//   // baseStyle: { // 设置一些默认样式
//   //   bg: 'red.200'
//   // }
//   themeKey: 'MyButton'
// })

function App() {
  // const {colorMode,toggleColorMode} = useColorMode()
  // const bgColor = useColorModeValue('tomato','skyblue')

  // 响应式 第一个是默认
  // ['默认','30em','48em','62em','80em']
  return (
    // <Box w='200px' h='100px' bgColor={bgColor}>
    //   <Text>当前的颜色模式是{colorMode}</Text>
    //   <LightMode>
    //     <Button onClick={toggleColorMode}>切换颜色模式</Button>
    //   </LightMode>
    // </Box>
    // <Box
    //   mt='6'
    //   w={['100px','300px','500px','700px','1000px']} 
    //   h='10' 
    //   bgColor='cyan.500'
    // ></Box>
    <div>
      {/* <div>
        <Button size="xs">默认配置的 xs 尺寸</Button>
        <Button size="small">自定义的 small 尺寸</Button>
        <Button size="big">自定义的 big 尺寸</Button>
      </div>   */}
      <Content size="small" variant="card">这是用于展示文章内容的 Content 组件</Content>
    </div>
  );
}

export default App;
